<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>饼图</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
</head>
<body>
    <script>
        //数据源
        var dataset=[30,10,43,55,13];

        //添加svg画布
        var width=500;
        var height=500;
        var svg=d3.select('body').append('svg').attr('width',width).attr('height',height);

        //定义饼图布局
        var pie=d3.layout.pie();
        //返回值赋给变量 pie，此时 pie 可以当做函数使用
        var piedata=pie(dataset);
        //5 个整数被转换成了 5 个对象,每个对象都有变量起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。

        //弧生成器(饼图的每一部分都是一段弧。)
        var outerRadius=150;//外半径
        var innerRadius=0; //内半径,为0则中间没有空白

        //十种颜色的颜色比例尺
        var color=d3.scale.category10();

        var arc=d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);//设置内半径和外半径
        //在svg里添加5个分组元素g ,每个分组用于存放一段弧的相关元素
        var arcs=svg.selectAll('g').data(piedata).enter().append('g').attr('transform',`translate(${width/2},${height/2})`);
        //对每个g元素,添加path(path，是 SVG 中功能最强的元素，它可以表示其它任意的图形)
        arcs.append('path').attr('fill',function(value,index){
            return color(index);
        })
        .transition().duration(1000).attr('d',function(value){
            return arc(value);//调用弧生成器，得到路径值
        })
        //在每个弧线中心添加文本
        arcs.append('text').attr('transform',function(value){
            return `translate(${arc.centroid(value)})`;//算出弧线的中心
        }).attr('text-anchor','middle')
          .text(function(value){
              return value.data;//获取转换前的原始数据
            })
    </script>
</body>
</html>